<!DOCTYPE html>
<html lang="zh" xml:lang="zh">
<head>
    <meta charset='utf-8'/>
    <title>Map-Navigator</title>
    <script src="../ref/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        * {
            font-family: "微软雅黑";
            nargin: 0px;
            padding: 0px;
        }

        #toolbar {
            background-color: #FFFFFF;
            width: 100%;
            height: 125px;
            position: fixed;
            left: 0px;
            top: 0px;
        }

        #body {
            background-color: #EEEEEE;
            width: 100%;
            height: 800px;
            margin-top: 120px;
        }

        #table {
            line-height: 40px;
            width: 100%;
            text-align: center;
            border-bottom: 0.5px solid #94e0b4;
        }

        #table tr td {
            border-right: 0.5px solid #94e0b4;
            width: 33%;
            height: 40px;

        }

        .table_tr {
            background-color: #2dcc70;
            color: white;
            font-size: 20px;
            height: 50px;
        }

        .table_style1 {
            background-color: #e0f3e8;
        }

        .table_style2 {
            background-color: #cff1dd;
        }

        .table_style1:hover, .table_style2:hover {
            background-color: #6ade9b;
        }

        #toolbar_title {
            width: 100%;
            font-size: 24px;
            text-align: bottom;
            line-height: 70px;
            position: relative;
            margin-left: 35%;
        }

        hr {
            margin: -10px 30px 0px 30px;
            border-color: #2dcc70;
            border-width: 0.5px;
        }

        .toolbar_button {
            height: 44px;
            width: 44px;
            border-radius: 22px;
            background-color: #2dcc70;
            display: inline-block;
            margin-top: 8px;
            margin-left: 10px;
        }

        .toolbar_button2 {
            height: 40px;
            width: 40px;
            border-radius: 20px;
            background-color: white;
            margin: 4px;
            text-align: center;
            cursor: pointer;
            color: #555555;
        }

        .toolbar_button2:hover {
            background-color: #2dcc70;
            color: red;
        }

        .toolbar_button2 span {
            margin-top: 20px;
            line-height: 40px;
            font-size: 13px;
        }

        a:visited, a:link {
            color: black;
            text-decoration: none;
        }

        a:hover {
            color: #0000FF;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div id="toolbar">
    <span id="toolbar_title">监测站空气质量排行</span>
    <hr></hr>
    <div class="toolbar_button">
        <div id="_bt1" class="toolbar_button2"><span>AQI</span></div>
    </div>

    <div class="toolbar_button">
        <div id="_bt2" class="toolbar_button2"><span>PM2.5</span></div>
    </div>

    <div class="toolbar_button">
        <div id="_bt3" class="toolbar_button2"><span>PM10</span></div>
    </div>

    <div class="toolbar_button">
        <div id="_bt4" class="toolbar_button2"><span>SO2</span></div>
    </div>

    <div class="toolbar_button">
        <div id="_bt5" class="toolbar_button2"><span>NO2</span></div>
    </div>

    <div class="toolbar_button">
        <div id="_bt6" class="toolbar_button2"><span>CO</span></div>
    </div>

    <div class="toolbar_button">
        <div id="_bt7" class="toolbar_button2"><span>O3</span></div>
    </div>
</div>
<div id="body">
    <table id="table" cellspacing="0">
        <tr class="table_tr">
            <td>排序</td>
            <td>站点</td>
            <td>数值</td>
        </tr>
        <tbody id="data">
    </table>
</div>
<script type="text/javascript">
    var bt = [];
    for (var i = 1; i < 8; i++) {
        bt[i - 1] = document.getElementById('_bt' + i);
    }
    var writed = false;
    $(document).ready(function () {

        $.get('/hbtserver/station?type=shi', function (rt, st) {

            var dataShi = $.parseJSON(rt);
            var getalldata = toobarEvent.GetAllData(dataShi);

            toobarEvent.setselect(bt[0]);
            toobarEvent.init(getalldata, 1);
            for (var i = 0; i < 7; i++) {
                toobarEvent.clickSelect(getalldata, bt[i], i + 1);
            }

        });
    });

    var toobarEvent = {
        setselect: function (a) {
            for (var i = 7; i > 0; i--) {
                var _bt = document.getElementById('_bt' + i);
                if (_bt === a) {
                    _bt.style.backgroundColor = "#2dcc70";
                    _bt.style.color = "white";
                }
                else {
                    _bt.style.backgroundColor = "white";
                    _bt.style.color = "#555555";
                }
            }
        },
        clickSelect: function (getalldata, btn, flag) {
            btn.onclick = function () {
                toobarEvent.setselect(btn);
                toobarEvent.init(getalldata, flag);
            }
        },
        zero: function (t) {
            var A = [];
            var i = t;
            while (i > 0) {
                A.push(0);
                i--;
            }
            return A;
        },
        GetAllData: function (dataShi) {
            var shi_js = dataShi,
                _name = [],
                _aqi = [],
                _pm25 = [],
                _pm10 = [],
                _so2 = [],
                _no2 = [],
                _co = [],
                _o3 = [],
                i,
                length = shi_js.length || 0;

            for (i = 0; i < length; i++) {
                _name.push(shi_js[i].name);
                _aqi.push(shi_js[i].aqi);
                _pm25.push(shi_js[i].pm25);
                _pm10.push(shi_js[i].pm10);
                _so2.push(shi_js[i].so2);
                _no2.push(shi_js[i].no2);
                _co.push(shi_js[i].co);
                _o3.push(shi_js[i].o3);
            }
            return [_name, _aqi, _pm25, _pm10, _so2, _no2, _co, _o3];
        },
        init: function (getalldata, t) {
            if (writed) {
                $("#data").empty();
                writed = false;
            }

            var _name = getalldata[0];
            var _data = getalldata[t];

            //rank
            var rank = toobarEvent.rank(_data);

            var _length = _name.length || 0;
            for (var i = 0; i < _length; i++) {
                var _f = rank[i];
                if (i % 2 === 0) {
                    $("#data").append(
                        '<tr class="table_style1">' +
                        '<td>' + (i + 1) + '</td>' +
                        '<td ><a href=Frame.html?code=' + _f + '>' + _name[_f] + '</a></td>' +
                        '<td style="border-right:0px;">' + _data[_f] + '</td>' +
                        '</tr>'
                    );
                }
                else {
                    $("#data").append(
                        '<tr class="table_style2">' +
                        '<td>' + (i + 1) + '</td>' +
                        '<td><a href=Frame.html?code=' + _f + '>' + _name[_f] + '</a></td>' +
                        '<td style="border-right:0px;">' + _data[_f] + '</td>' +
                        '</tr>'
                    );
                }
            }

            writed = true;
        },
        rank: function (_d) {
            var rank = [],
                len = _d.length,
                comp = toobarEvent.zero(len),
                _max,
                m;

            for (var i = 0; i < len; i++) {
                for (m = 0; m < len; m++)
                    if (comp[m] == 0) {
                        _max = _d[m];
                        break;
                    }
                var flag = 0.000001;
                for (var j = 0; j < len; j++)
                    if (_d[j] > _max && comp[j] === 0) {
                        _max = _d[j];
                        flag = j;
                    }

                if (flag != 0.000001) {
                    rank.push(flag);
                    comp[flag] = 1;
                }
                else {
                    rank.push(m);
                    comp[m] = 1;
                }
            }
            return rank;
        }
    }

</script>
</body>
</html>
		